<script setup>
import { defineEmits, defineProps, ref, watch, toRefs, reactive } from "vue";
import { getSendcode, login } from "@/apis/index.js";
import { ElMessage } from "element-plus";
import slideVerify from "./slideVerify.vue";

let props = defineProps({
  modelValue: {
    type: Boolean,
    require: true,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  footer: {
    type: Boolean,
    default: true,
  },
});
const dialogVisible = ref(props.modelValue); //显示弹窗
const fullscreen = ref(false); //是否全屏
const formBody = ref("form-body"); //弹窗body部分css
const { title } = toRefs(props);

let emits = defineEmits(["update:modelValue", "saveSubmit"]);
const nameRef = ref();
const state = reactive({
  smsCodeTime: 60,
  smsCodeText: "发送验证码",
  verifyModal: false,
  isVerifySuccess: false,
});
const form = reactive({
  name: "",
  code: "",
  radio: false,
});

const rules = {
  name: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入短信验证码",
      trigger: "blur",
    },
  ],
};

//全屏
const changeScreen = () => {
  fullscreen.value = !fullscreen.value;
};
//销毁
const close = () => {
  dialogVisible.value = false;
  emits("update:modelValue", false);
};

//监听value
watch(
  () => props.modelValue,
  (value, o) => {
    console.log(value);
    if (value === true) {
      fullscreen.value = false;
    }
    dialogVisible.value = value;
  },
);
const handleGetCode = async () => {
  if (state.disabled) return;
  await nameRef.value.validate();
  if (!state.isVerifySuccess) {
    handleVerifyOpen();
    return;
  }
  const { data } = await getSendcode({
    mobile: form.name,
  });
  if (Number(data.code) != 1) {
    ElMessage.error(data.mobile);
    return;
  }
  ElMessage.success("短信发送成功");
  const timer = setInterval(() => {
    state.smsCodeTime--;
    state.smsCodeText = `请${state.smsCodeTime}秒后再试`;
    state.disabled = true;
  }, 1000);
  state.isVerifySuccess = false;
  setTimeout(() => {
    state.disabled = false;
    state.smsCodeText = "获取验证码";
    state.smsCodeTime = 60;
    clearInterval(timer);
  }, 60 * 1000);
};
//显示滑块验证
const handleVerifyOpen = () => {
  state.verifyModal = true;
};
//滑块验证通过
const handleVerifySuccess = () => {
  state.verifyModal = false;
  state.isVerifySuccess = true;
  handleGetCode();
  ElMessage.success("验证通过");
};

//保存表单方法
const saveSubmit = async () => {
  const { data } = await login({
    mobile: form.name,
    mobilecode: form.code,
  });
  if (Number(data.code) !== 1) {
    ElMessage.error(data.mobile);
    return;
  }
  console.log(data);
  localStorage.setItem("isLogin", "1");
  localStorage.setItem("userInfo", JSON.stringify(data.data));
  ElMessage.success("登录成功");
  window.location.reload();
  emits("saveSubmit", props.saveSubmit);
  close();
};
</script>

<template>
  <el-dialog
    v-if="dialogVisible"
    v-model="dialogVisible"
    class="bai-dialog flex flex-col"
    v-bind="$attrs"
    v-on="$parent"
    @close="close"
    style="width: 500px"
  >
    <!--    <template #header>-->
    <!--      <div class="custom-header">-->
    <!--        <div class="text-xl flex items-center">登录</div>-->
    <!--      </div>-->
    <!--      <el-divider />-->
    <!--    </template>-->
    <template #default>
      <div class="text-xl flex items-center justify-center">
        <img class="w-16" src="@/assets/images/logo.png" alt="" />
      </div>
      <el-form
        :model="form"
        :rules="rules"
        label-width="auto"
        class="form-body w-[80%] mt-4 mx-auto"
      >
        <el-form-item prop="name" ref="nameRef">
          <el-input v-model="form.name" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="form.code" placeholder="请输入短信验证码">
            <template #suffix>
              <span
                @click.stop
                class="text-blue-400 cursor-pointer"
                @click="handleGetCode"
                >{{ state.smsCodeText }}</span
              >
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="w-full"
            type="primary"
            @click="saveSubmit"
            color="#af0000"
            size="large"
            >登录</el-button
          >
        </el-form-item>
        <!--        <el-form-item>-->
        <!--          <el-radio-group v-model="form.radio">-->
        <!--            <el-radio :value="form.radio" size="large"-->
        <!--              >未注册手机登陆时会自动创建新账号</el-radio-->
        <!--            >-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
      </el-form>
    </template>
    <!--    <template v-if="footer" #footer>-->
    <!--      <div>-->
    <!--        <el-button @click="close">取消</el-button>-->
    <!--      </div>-->
    <!--    </template>-->
  </el-dialog>
  <el-dialog
    style="width: 350px"
    v-model="state.verifyModal"
    title="请完成安全验证"
  >
    <slideVerify v-if="state.verifyModal" @success="handleVerifySuccess" />
  </el-dialog>
</template>

<style lang="scss" scoped>
.form-body {
  height: 100%;
  :deep(.el-input) {
    height: 45px;
  }
}

.custom-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
}

.custom-header .right-btn {
  height: 40px;
  cursor: pointer;
}

.custom-header .right-btn .el-icon {
  margin-right: 10px;
  height: 100%;
}

.custom-header .right-btn .el-icon:hover {
  color: #fff000;
}

.el-scrollbar {
  margin-bottom: 30px;
}
.svgIcon {
  color: #0c67da;
}
</style>
